<template>
  <div class="root_">
    <div id="Map"></div>
    <!-- <div @click="ShowDengInfo(true)" class="aa"></div> -->

    <!-- 设备弹出页面 -->
    <div v-show="Tap" class="Devicedialog">
      <div class="DeviceFun">
        <!-- 智能照明 -->
        <div class="SmartLighting in"></div>
        <!-- 智能监控 -->
        <div @click="ShowVideo" class="IntelligentSurveillance in"></div>
        <!-- 信息发布 -->
        <div class="ReleaseInformation in"></div>
        <!-- 环境监测 -->
        <div class="EnvironmentalMonitoring in"></div>
        <!-- 内容显示 -->
        <div class="ContentPresentation in"></div>
        <!-- 运行情况 -->
        <div class="Operation in"></div>
        <!-- 公众广播 -->
        <div class="PublicBroadcasting in"></div>
        <!-- 紧急呼叫 -->
        <div class="EmergencyCalls in"></div>
      </div>
      <div class="DeviceName">
        <div class="name">{{ MarkerName }}</div>
        <div @click="ShowDengInfo(false)" class="close"></div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { GetBigScreenUrl } from "@/api/BigScreen";
export default {
  data() {
    return {
      Tap: false,
      map: null,
      layImg: null,
      // 高德地图
      AMap: null,
      MarkerName: "",
    };
  },
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "ca1d53757ab1ec270138c1643a651e47",
      };

      // console.log(imageLayer);
      let that = this;
      AMapLoader.load({
        key: "0ba2408576fa3f7dc06311da2de61b6e", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          that.AMap = AMap;
          let imageLayer = new AMap.ImageLayer({
            // url: "https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg",
            url: require("../../../assets/Home/OIPC1.jpg"),

            bounds: new AMap.Bounds([115.04, 38.54], [115.02, 38.53]),
            zooms: [11, 20],
          });
          that.map = new AMap.Map("Map", {
            // 设置地图容器id
            zoom: 16.5, // 初始化地图级别
            center: [115.03, 38.534], // 初始化地图中心点位置
            layers: [AMap.createDefaultLayer(), imageLayer],
          });
          this.LoadMarker();
          // that.map.add(imageLayer)
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 加载标记物
    LoadMarker() {
      let that = this;
      let marker1 = new AMap.Marker({
        position: new AMap.LngLat(115.032, 38.54),
        offset: new AMap.Pixel(-10, 5),
        icon: require("../../../assets/Home/dengta.png"), //添加 icon 图标 URL
        title: "智慧灯杆006",
      });

      let marker2 = new AMap.Marker({
        position: new AMap.LngLat(115.028, 38.5345),
        offset: new AMap.Pixel(-10, 5),
        icon: require("../../../assets/Home/denggan1.png"), //添加 icon 图标 URL
        title: "智慧灯杆001",
      });
      let marker3 = new AMap.Marker({
        position: new AMap.LngLat(115.0322, 38.5343),
        offset: new AMap.Pixel(-10, 5),
        icon: require("../../../assets/Home/denggan3.png"), //添加 icon 图标 URL
        title: "智慧灯杆003",
      });
      let marker4 = new AMap.Marker({
        position: new AMap.LngLat(115.0305, 38.535),
        offset: new AMap.Pixel(-10, 5),
        icon: require("../../../assets/Home/denggan2.png"), //添加 icon 图标 URL
        title: "智慧灯杆002",
      });
      marker1.on("click", function (ev) {
        that.ShowDengInfo(true);
        that.MarkerName = ev.target._opts.title;
        console.log(ev.target._opts);
      });
      marker2.on("click", function (ev) {
        that.ShowDengInfo(true);
        that.MarkerName = ev.target._opts.title;
      });
      marker3.on("click", function (ev) {
        that.ShowDengInfo(true);
        that.MarkerName = ev.target._opts.title;
      });
      marker4.on("click", function (ev) {
        that.ShowDengInfo(true);
        that.MarkerName = ev.target._opts.title;
      });
      this.map.add(marker1);
      this.map.add(marker2);
      this.map.add(marker3);
      this.map.add(marker4);
    },
    // 展示灯杆详细功能
    ShowDengInfo(type) {
      this.Tap = type;
    },
    ShowVideo() {
      let preUrl;
      let that = this;
      GetBigScreenUrl().then((res) => {
        console.log(res);
        preUrl = res.data.monitor.path;
        this.$bus.$emit("ShowVideo", preUrl);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.root_ {
  position: relative;
  #Map {
    width: 100%;
    height: 12.2375rem /* 979/80 */;
    position: absolute;
  }
  .aa {
    width: 1.5125rem /* 121/80 */;
    height: 55.09px;
    background: url(../../../assets/Home/dengta.png);
    position: absolute;
    left: 9.5rem /* 800/80 */;
    top: 7.5rem /* 600/80 */;
    cursor: pointer;
  }

  .bb {
    width: 0.701125rem /* 56.09/80 */;
    height: 0.919875rem /* 73.59/80 */;
    background: url(../../../assets/Home/shexiangtou.png);
    background-size: 100% 100%;
    position: absolute;
    left: 11.5rem /* 800/80 */;
    top: 8rem /* 600/80 */;
    cursor: pointer;
  }

  // 弹出层
  .Devicedialog {
    position: absolute;
    left: 7.9875rem /* 639/80 */;
    top: 0.45rem /* 36/80 */;
    display: flex;
    flex-direction: column;

    .DeviceFun {
      width: 7rem /* 560/80 */;
      height: 7rem;
      background: url(../../../assets/Home/mengban1.png);
      .in {
        position: absolute;
        width: 2.125rem /* 170/80 */;
        height: 0.7rem /* 56/80 */;
      }
      .SmartLighting {
        background: url(../../../assets/Home/liting.png);
        top: 2.35rem /* 188/80 */;
        left: 1.2875rem /* 103/80 */ /* 300/80 */;
      }
      .IntelligentSurveillance {
        background: url(../../../assets/Home/39.png);
        top: 3.075rem /* 246/80 */;
        left: 0.9125rem /* 73/80 */;
      }
      .ReleaseInformation {
        background: url(../../../assets/Home/40.png);
        top: 3.8375rem /* 307/80 */;
        left: 0.9125rem /* 73/80 */;
      }
      .EnvironmentalMonitoring {
        background: url(../../../assets/Home/41.png);
        top: 4.6rem /* 368/80 */;
        left: 1.2875rem /* 103/80 */ /* 300/80 */;
      }

      .ContentPresentation {
        background: url(../../../assets/Home/48.png);
        top: 2.35rem /* 188/80 */;
        left: 3.75rem; /* 300/80 */
      }
      .Operation {
        background: url(../../../assets/Home/43.png);
        top: 3.075rem /* 246/80 */;
        left: 4rem /* 320/80 */;
      }
      .PublicBroadcasting {
        background: url(../../../assets/Home/47.png);
        top: 3.8375rem /* 307/80 */;
        left: 4rem /* 320/80 */;
      }
      .EmergencyCalls {
        background: url(../../../assets/Home/46.png);
        top: 4.6rem /* 368/80 */;
        left: 3.75rem /* 300/80 */;
      }
    }
    .DeviceName {
      width: 7rem /* 560/80 */;
      height: 0.5625rem /* 45/80 */;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      line-height: 0.5625rem /* 45/80 */;
      text-align: center;
      .name {
        width: 2.2875rem /* 183/80 */;
        height: 0.5625rem /* 45/80 */;
        margin-left: 0.4375rem /* 35/80 */;
        background: url(../../../assets/Home/namebg.png);
        font-size: 0.3rem /* 24/80 */;
        line-height: 0.5625rem;
        color: white;
      }
      .close {
        width: 0.2625rem /* 21/80 */;
        height: 0.2625rem /* 21/80 */;
        background: url(../../../assets/Home/chahao.png);
        margin-left: 0.2375rem;
        cursor: pointer;
      }
    }
  }
}
</style>
